﻿<%@ Page AutoEventWireup="true" CodeBehind="Detail.aspx.cs" Inherits="AssetManage.Manage.Detail" Language="C#" MasterPageFile="~/Site.Master" Title="查询" %>

<%@ Register Assembly="Trirand.Web" Namespace="Trirand.Web.UI.WebControls" TagPrefix="cc1" %>

<%@ MasterType VirtualPath="~/Site.Master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<link type="text/css" href="/Content/themes/bootstrap/jquery-ui-1.10.3.custom.css" rel="stylesheet"/>
<link type="text/css" href="/Content/trirand/ui.jqgrid.css" rel="stylesheet"/>
<link type="text/css" href="/Content/trirand/jqGrid.overrides.css" rel="stylesheet"/>
<link type="text/css" href="/Content/trirand/ui.jqautocomplete.css" rel="stylesheet"/>
<style>
    .ui-jqgrid .ui-jqgrid-htable th {
        font-size: medium;
        font-weight: 700;
        height: 32px;
        padding-bottom: 15px;
    }

    .ui-datepicker select.ui-datepicker-year { width: 37%; }

    .ui-datepicker select.ui-datepicker-month { width: 45%; }

    .ui-jqgrid .ui-pg-selbox { width: 55px; }

    .ui-jqgrid .ui-pg-input { width: 20px; }
</style>

<script type="text/javascript" src="/Scripts/trirand/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="/Scripts/trirand/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="/Scripts/trirand/jquery.jqDatePicker.min.js"></script>
<script type="text/javascript" src="/Scripts/trirand/jquery.jqAutoComplete.min.js"></script>
<script type="text/javascript">
    var InquiryButton = "#<%= InquiryButton.ClientID %>";
    var UserID = "#<%= UserID.ClientID %>";
    var Balance = "#<%= Balance.ClientID %>";
    var ExportToExcel_Button = "#<%= ExportToExcel_Button.ClientID %>";
    var StartDate = "#" + "<%= StartDate.ClientID %>";
    var EndDate = "#" + "<%= EndDate.ClientID %>";

    $(function() {
        $("[title]").tooltip({
            position: {
                my: "center top+15",
                at: "center bottom",
                using: function(position, feedback) {
                    $(this).css(position);
                    $("<div>")
                        .addClass("arrow top")
                        .addClass(feedback.vertical)
                        .addClass(feedback.horizontal)
                        .appendTo(this);
                }
            }
        });

        $(ExportToExcel_Button).hide();

        $(StartDate).attr("readonly", "readonly");
        $(StartDate).datepicker({
            language: "zh-CN",
            changeYear: true,
            changeMonth: true,
            defaultDate: "-60d",
            minDate: "2012/09/01",
            maxDate: "today",
            onSelect: function(selectedDate) {
                $(EndDate).datepicker("option", "minDate", selectedDate);
                $("#ExportToExcel").attr("disabled", "disabled");
            }
        });

        $(EndDate).attr("readonly", "readonly");
        $(EndDate).datepicker({
            language: "zh-CN",
            changeYear: true,
            changeMonth: true,
            defaultDate: "today",
            minDate: "-60d",
            maxDate: "today",
            onSelect: function(selectedDate) {
                $(StartDate).datepicker("option", "maxDate", selectedDate);
                $("#ExportToExcel").attr("disabled", "disabled");
            }
        });

        $(UserID).change(function() {
            $("#Expense_Div").hide();
            $("#ExportToExcel").hide();
        });

        $("#Inquiry").click(function() {
            $("#Inquiry").attr("disabled", "disabled");
            $("#Inquiry").attr("value", "正在等待服务器响应……");
            $(InquiryButton).click();
        });

        $("#ExportToExcel").click(function() {
            $("#ExportToExcel").attr("disabled", "disabled");
            $(ExportToExcel_Button).click();
            $(DisableExportToExcel());
        });

        $(UserID).change(function() {
            var sendData = {
                "action": "balance",
                "tableid": $(UserID).val()
            };
            $.ajax({
                type: "POST",
                url: "/Handler/Account",
                data: sendData,
                success: function(response) {
                    var responseData = eval("(" + response + ")");
                    if (responseData.success) {
                        $(Balance).val(responseData.balance);
                        $(Balance).css("color", responseData.color);
                    } else {
                        $(Balance).val("未知");
                    }
                }
            });
        });
    });

    var LeftSeconds = 15;

    function DisableInquiryButton() {
        if (LeftSeconds > 0) {
            $("#Inquiry").attr("disabled", "disabled");
            $("#Inquiry").attr("value", "请于" + LeftSeconds + "秒后再试……");
            setTimeout(DisableInquiryButton, 1000);
            LeftSeconds--;
        } else {
            $("#Inquiry").removeAttr("disabled");
            $("#Inquiry").attr("value", "查询");
            LeftSeconds = 15;
        }
    }

    var ExportToExcel_LeftSeconds = 60;

    function DisableExportToExcel() {
        if (ExportToExcel_LeftSeconds > 0) {
            $("#ExportToExcel").attr("disabled", "disabled");
            $("#ExportToExcel").attr("value", "请于" + ExportToExcel_LeftSeconds + "秒后再试……");
            setTimeout(DisableExportToExcel, 1000);
            ExportToExcel_LeftSeconds--;
        } else {
            $("#ExportToExcel").removeAttr("disabled");
            $("#ExportToExcel").attr("value", "导出为Excel");
            ExportToExcel_LeftSeconds = 60;
        }
    }

    $(function() {
        $("#Expense_Div").hide();
        $(UserID).change();
    });

    function ShowResult() {
        $("#Expense_Div").show();
    }

    function RefreshProgress() {
        var value = $("#progress").progressbar("value");
        value += 1;
        $("#progress").progressbar("value", value);
        if (value < 100) {
            setTimeout(RefreshProgress, (Math.random() * 10000) / 100);
        }
    }

    var AutoLeftSeconds = 5;

    function CountDownClose() {
        if (AutoLeftSeconds <= 0) {
            $("#dialog").dialog("close");
            $("#dialog").dialog("option", "title", "正在关闭……");
            AutoLeftSeconds = 5;
            return;
        }
        $("#dialog").dialog("option", "title", "将在" + AutoLeftSeconds + "秒后自动关闭……");
        setTimeout(CountDownClose, 1000);
        AutoLeftSeconds--;
    }

    function ShowDialog() {
        $(function() {
            $("#Inquiry").attr("disabled", "disabled");
            $("#Inquiry").attr("value", "正在等待服务器响应……");
            $("#progress").progressbar({
                value: 0,
                change: function() {
                    var value = $("#progress").progressbar("value");
                    if (value >= 100) {
                        $(DisableInquiryButton);
                        $(".ui-dialog-buttonpane button").show();
                        $("#success").text("完成!");
                        $(CountDownClose);
                        setTimeout(ShowResult, 1000);
                        $("#ExportToExcel").show();
                        return;
                    }
                    $(".ui-dialog-buttonpane button").hide();
                    $("#message").text("正在查找数据……");
                }
            });

            $("#dialog").dialog({
                title: "请稍候……",
                closeText: "关闭",
                modal: true,
                closeOnEscape: false,
                buttons: {
                    "确定": function() {
                        $(this).dialog("close");
                    }
                },
                beforeClose: function() {
                    var value = $("#progress").progressbar("value");
                    if (value < 100) {
                        return false;
                    }
                    return true;
                }
            });
            $(RefreshProgress);
        });
    };
</script>

<div class="form-horizontal">
    <h3>账户详细记录</h3>
    <hr/>
    <div class="form-group">
        <asp:Label runat="server" AssociatedControlID="UserID" CssClass="col-md-2 control-label">账户</asp:Label>
        <div class="col-md-10">
            <asp:DropDownList ID="UserID" CssClass="form-control" runat="server" Font-Size="Medium" DataSourceID="Account_SqlDataSource" DataTextField="RealName" DataValueField="TableID" OnDataBound="UserID_DataBound">
            </asp:DropDownList>
            <asp:SqlDataSource ID="Account_SqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:Account_ConnectionString %>" ProviderName="<%$ ConnectionStrings:Account_ConnectionString.ProviderName %>"></asp:SqlDataSource>
        </div>
    </div>
    <div class="form-group">
        <asp:Label runat="server" AssociatedControlID="Balance" CssClass="col-md-2 control-label">账户余额</asp:Label>
        <div id="Balance_Div" class="col-md-10" runat="server">
            <asp:TextBox runat="server" ID="Balance" CssClass="form-control" Font-Size="Medium" Nullable="False" TextMode="Number" ReadOnly="True" Style="cursor: text"/>
        </div>
    </div>
    <div class="form-group">
        <asp:Label runat="server" AssociatedControlID="StartDate" CssClass="col-md-2 control-label">起始日期</asp:Label>
        <div class="col-md-10">
            <asp:TextBox ID="StartDate" Font-Size="Medium" Nullable="False" CssClass="form-control" runat="server" Wrap="False" Style="cursor: pointer" MaxLength="10" data-toggle="tooltip" data-placement="bottom" title="点击选择日期"></asp:TextBox>
        </div>
    </div>
    <div class="form-group">
        <asp:Label runat="server" AssociatedControlID="EndDate" CssClass="col-md-2 control-label">截止日期</asp:Label>
        <div class="col-md-10">
            <asp:TextBox ID="EndDate" Font-Size="Medium" Nullable="False" CssClass="form-control" runat="server" Style="cursor: pointer" MaxLength="10" data-toggle="tooltip" data-placement="bottom" title="点击选择日期"></asp:TextBox>
        </div>
    </div>
    <div class="form-group">
        <asp:Label runat="server" CssClass="col-md-2 control-label"></asp:Label>
        <div class="col-md-10">
            <input id="Inquiry" type="button" value="查询" class="btn btn-primary btn-lg"/>
            <asp:Button ID="InquiryButton" class="btn btn-primary btn-lg" Text="查询" runat="server" OnClick="InquiryButton_Click" Style="display: none;"/>
            <input id="ExportToExcel" type="button" value="导出为Excel" class="btn btn-primary btn-lg" style="display: none;"/>
            <asp:Button ID="ExportToExcel_Button" runat="server" Text="Button" Class="btn btn-primary btn-lg" OnClick="ExportToExcel_Click"/>
        </div>
    </div>
    <div id="Expense_Div" class="form-group">
        <asp:Label runat="server" AssociatedControlID="Expense" CssClass="col-md-2 control-label">详细记录</asp:Label>
        <div class="col-md-10">
            <cc1:JQGrid
                ID="Expense"
                runat="server"
                DataSourceID="Expense_SqlDataSource"
                Width="500px" Height="230px">
                <Columns>
                    <cc1:JQGridColumn
                        HeaderText="时间"
                        DataField="Time"
                        TextAlign="Left"
                        DataFormatString="{0:yyyy/MM/dd HH:mm:ss}"
                        FixedWidth="true"
                        Width="150">
                    </cc1:JQGridColumn>
                    <cc1:JQGridColumn
                        HeaderText="金额"
                        DataField="Expense"
                        TextAlign="Right"
                        DataFormatString="{0:N2}"
                        FixedWidth="true"
                        Width="75">
                    </cc1:JQGridColumn>
                    <cc1:JQGridColumn
                        HeaderText="项目"
                        DataField="Item"
                        TextAlign="Left"
                        FixedWidth="true"
                        Width="245">
                    </cc1:JQGridColumn>
                </Columns>
                <SortSettings
                    InitialSortColumn="Time"
                    InitialSortDirection="Desc"/>
                <ToolBarSettings
                    ShowViewRowDetailsButton="true"
                    ToolBarPosition="Bottom"/>
            </cc1:JQGrid>
            <asp:SqlDataSource ID="Expense_SqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:Expense_ConnectionString %>" ProviderName="<%$ ConnectionStrings:Expense_ConnectionString.ProviderName %>"></asp:SqlDataSource>
        </div>
    </div>
    <div id="dialog">
        <div id="progress"></div>
        <div id="message" style="font-size: medium"></div>
        <div id="success" class="text-success" style="font-size: medium"></div>
        <div id="error" class="text-danger" style="font-size: medium"></div>
    </div>
</div>
</asp:Content>